<template>
  <el-table :data="userList" border style="width: 100%">
    <el-table-column prop="id" label="用户编号" width="100" />
    <el-table-column prop="username" label="账号(用户名)" width="150" />
    <el-table-column prop="password" label="密码(建议加密存储)" width="180" />
    <el-table-column prop="phone" label="手机号" width="150" />
    <el-table-column prop="address" label="地址" />
    <el-table-column prop="credit" label="信誉分(默认60)" width="120" />
    <el-table-column prop="avatar" label="头像">
      <template #default="scope">
        <el-avatar v-if="scope.row.avatar" :src="scope.row.avatar" size="small" />
        <span v-else>无</span>
      </template>
    </el-table-column>
    <el-table-column prop="gender" label="性别" width="100" />
    <el-table-column prop="intro" label="个人简介" />
    <el-table-column prop="status" label="认证状态">
      <template #default="scope">
        {{ scope.row.status === 0 ? '未认证' : '已认证' }}
      </template>
    </el-table-column>
    <el-table-column prop="salt" label="salt" width="150" />
    <el-table-column prop="nickname" label="昵称" width="120" />
    <el-table-column prop="signDays" label="连续签到天数" width="150" />
    <el-table-column
        label="操作"
        width="120"
        align="center"
    >
      <template #default="scope">
        <el-button
            type="text"
            size="small"
            @click="handleViewDetail(scope.row)"
        >
          查看详情
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import {onMounted, ref} from 'vue';
import server from "../utils/request.js";
import {ElMessage} from "element-plus";
import router from "../router/index.js";

// 模拟用户数据
const userList = ref([
  {
    id: 1,
    username: 'user1',
    password: 'encrypted123',
    phone: '13800138001',
    address: '北京市朝阳区',
    credit: 80,
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    gender: '男',
    intro: '热爱生活的用户',
    status: 1,
    salt: 'salt123',
    nickname: '用户一',
    signDays: 5
  },
  {
    id: 2,
    username: 'user2',
    password: 'encrypted456',
    phone: '13900139001',
    address: '上海市浦东新区',
    credit: 60,
    gender: '女',
    intro: '喜欢旅行的用户',
    status: 0,
    salt: 'salt456',
    nickname: '用户二',
    signDays: 0
  }
]);

async function loadData() {
  try {
    const { data } = await server.get("user");
    if (data.code === 200) {
      userList.value = data.data;
    }
  } catch (error) {
    console.error("加载数据失败:", error);
    ElMessage.error('加载数据失败');
  }
}

onMounted(()=>{
  loadData()
})

function handleViewDetail(row){
  router.push(`userDetail?id=${row.id}`)
}

</script>

<style scoped>
/* 可根据需要添加样式 */
</style>